<template>
  <el-dialog v-model="dialogVisible" title="选择头像" width="70%" top="5vh">
    <div class="flex" style="height: 500px">
      <div style="width: 200px" class="image-aside">
        <div class="top" v-loading="loading">
          <div
            class="image-aside-list"
            v-for="item in classList"
            :key="item.id"
            :class="{ active: item.id === activeId }"
            @click="handleChangeActiveId(item.id)"
          >
            <p class="truncate text-sm">{{ item.name }}</p>
          </div>
        </div>
        <div class="bottom">
          <el-pagination
            background
            layout="prev, next"
            :total="total"
            :current-page="pages"
            :page-size="limit"
            @current-change="changePage"
          />
        </div>
      </div>
      <div class="image-main" style="width: 100%">
        内容
        <el-checkbox-group v-model="form.list">
          <el-checkbox
            v-for="item in skuValue"
            :key="item"
            :label="item"
            border
          >
            {{ item }}
          </el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveClick"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, reactive } from "vue";
import { getSkuList } from "@/api/skus";
let pages = ref(1); //当前页
let total = ref(0); //总条数
let limit = ref(10); // 每一页显示多少
let classList = ref([]); // 列表
let activeId = ref(); // 当前点击的id
const loading = ref(false); // loading效果
let dialogVisible = ref(false);

let skuValue = ref([]); //规格值

const getData = () => {
  loading.value = true;
  getSkuList({ page: pages.value }).then((res) => {
    loading.value = false;
    classList.value = res.data.list;
    activeId.value = res.data.list[0].id;
    handleChangeActiveId(res.data.list[0].id);
    total.value = res.data.totalCount;
  });
};

// 分页
const changePage = (e) => {
  pages.value = e;
  getData();
};

// 需要传递的值
const form = reactive({
  name: "",
  list: [],
});

// 切换分类;
function handleChangeActiveId(id) {
  activeId.value = id;
  form.list = [];
  let item = classList.value.find((o) => o.id == id);
  if (item) {
    skuValue.value = item.default.split(",");
    form.name = item.name;
  }
}
let callbackFun = ref(null); // 回调函数
const open = (callback = null) => {
  getData();
  callbackFun.value = callback;
  dialogVisible.value = true;
};
const saveClick = () => {
  dialogVisible.value = false;
  callbackFun.value(form);
};
defineExpose({
  open,
});
</script>

<style>
.image-main {
  position: relative;
}
.image-aside .top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 50px;
  overflow-y: auto;
}

.image-aside .image-aside-list {
  cursor: pointer;
  @apply flex items-center p-3;
}

.image-aside .image-aside-list:hover,
.active {
  @apply bg-blue-50;
}

.image-aside .bottom {
  position: absolute;
  height: 50px;
  line-height: 50px;
  bottom: 0;
}

.el-form-item__label {
  text-align: right;
}
</style>
